import { View } from '@tarojs/components'
import { useImperativeHandle, useState, forwardRef } from 'react'
import { AtIcon } from 'taro-ui'

import './index.less'

type propsType = {
    icon: string,
    size?: number,
    color?: string,
    onClick?: () => void,
}

const defaultVal = {
    icon: 'add',
    size: 30,
    color: '#6190E8',
    onClick: () => { },
}

function FloatBtn(props: propsType = defaultVal, ref) {
    const { size, onClick, icon, color } = props
    const [visible, setVisible] = useState(true)

    useImperativeHandle(ref, (): any => ({
        setVisible: () => {
            setVisible(!visible)
        }
    }));

    function handleClick() {
        if (onClick) {
            onClick()
        }
    }

    return <View className='float-btn' ref={ref}>
        {
            visible && <View onClick={() => handleClick()} className='btn'>
                <View className='icon' style={{ color }}>
                    <AtIcon value={icon} size={size} color='#ffffff'></AtIcon>
                </View>
            </View>
        }
    </View>
}

export default forwardRef(FloatBtn)